<template>
    <div class="jfms">
        <h3>请输入手机号码查询</h3>
        <div class="jeInput">
            <my-input v-model="phone" type="number" placeholder="请输入金手机号"/>
        </div>
        <div class="btnWrap">
            <my-buttom txt="查询" @click="search"/>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs } from 'vue'
import {useRouter, useRoute} from 'vue-router'
import { useStore } from 'vuex'
import myInput from '@/components/myInput.vue'
import myButtom from '@/components/myButtom.vue'
export default {
    components:{
        myInput,
        myButtom
    },
    setup() {
        const router = useRouter(), route = useRoute();
        const store = useStore()
        const state = reactive({
            phone:''
        })

        const search = ()=>{ 
            if(!state.phone){
                return alert('请输入手机号')
            }else if(!checkMobile(state.phone)){
                return alert('手机号输入有误')
            }
            store.dispatch('get_payment_price',{
                communityId: store.state.carDetail.communityId,
                paymentTypeId:parseInt(route.query.id),
                phone: state.phone
            }).then(res =>{
                if(res.success){
                    sessionStorage.setItem("waitPayData",JSON.stringify({...res.data,phone:state.phone}))
                    router.push('other/doPay')
                }else{
                    alert(res.message)
                    // const gg = {
                    //     paymentSettingId:1,	
                    //     price:0.01,	
                    //     roomId:1,
                    //     roomName:'舒服的沙发'
                    // }
                    // sessionStorage.setItem("waitPayData",JSON.stringify({...gg,phone:state.phone}))
                    // router.push('other/doPay')
                }
            })
           
        }

        const checkMobile =phone=>{
            var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
            if (!myreg.test(phone)) {
              return false;
            } else {
              return true;
            }
        }

        return{
            ...toRefs(state),
            search
        }
    },
}
</script>

<style lang="scss" scoped>
    .jfms{
        line-height: normal;
        color: #fff;
        padding: 110px 0 0 0;
        text-align: center;
        h3{
            font-size: 35px;
            padding: 0;
            margin: 0;
            font-weight: 600;
            text-align: center;
        }
        .jeInput{
            display: inline-block;
            width: 700px;
            padding: 20px 0 0 0;
        }
    }
    .btnWrap{
            width: 400px;
            margin: 0 auto;
            padding:50px 0 0 0;
        }
</style>